<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="common/docs.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale = 1.0" />
		<title>Gantt : Samples</title></title>
		
	</head>
<body>
	
	<div class='abstop_header'>
		<div class='content_area'>
		&nbsp;
		</div>
	</div>
	<div class="page_header">
		<div class='page_inner_header'>
			<a href='https://dhtmlx.com'><div class='top_webix_logo'></div></a>
			Samples
		</div>
	</div>

	<div class="page_space">
	<div class="webixdoc_page webixdoc_start">
		<div id="webixContent" class='webixdoc_content'>
			<div class="webixdoc_content_inner">
				<div class="webixdoc_breadcrumb nav_breadcrumb">
					<a href="https://docs.dhtmlx.com/gantt/" class="webixdoc_back">Documentation</a>
					<a href="index.html" class="webixdoc_back">Samples</a>
					
				</div>
				<table class='nav_table'>
								<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='01_initialization'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='01_initialization'>Initialization</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/01_basic_init.html'>Basic initialization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/02_load_json.html'>Load data from JSON file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/03_load_xml.html'>Load data from XML file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/04_save_rest.html'>Backend storage using REST API</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/06_touch_forced.html'>Forced touch mode</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/07_jquery.html'>jQuery integration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/08_explicit_time_range.html'>Define date range</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/09_backward_compatibility.html'>Loading data in Gantt 1.6 format</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/10_fixed_size.html'>Fixed size gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/11_clickable_links.html'>Clickable links</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/12_localization.html'>Localization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/13_project_duration.html'>Project duration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/14_reinitializtion.html'>ReInit in different container</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/15_connector_json_enddate.html'>Loading tasks start/end dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/17_bootstrap.html'>Bootstrap layout</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/18_backward_planning.html'>Backward planning</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/19_tasks_without_dates.html'>Show Unscheduled Tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='01_initialization/20_tasks_outside_timescale.html'>Tasks outside timescale</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='02_extensions'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='02_extensions'>Extensions</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/01_quickinfo.html'>QuickInfo extension</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/02_tooltip.html'>Tooltip</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/05_today_line.html'>Today and Status lines in Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/09_multiselection.html'>Multiselection and Indent/Outdent tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/11_full_screen.html'>Full Screen</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/13_smart_rendering.html'>Working with 30000 tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/14_undo.html'>Undo/Redo changes in Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/16_keyboard_navigation.html'>Keyboard Navigation</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/17_keyboard_navigation_cell.html'>Keyboard Navigation - navigate cells</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/18_linked_tasks.html'>Auto Scheduling - Groups of connected tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/21_overlay.html'>Gantt chart with overlay</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/22_tooltip_api.html'>Custom Tooltips</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/23_click_drag_splittask.html'>Create split tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/24_click_drag.html'>Create new tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/25_click_drag_select_by_drag.html'>Select multiple tasks by Drag and Drop</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/26_full_screen_with_additional_elements.html'>Full Screen with additional elements</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='02_extensions/27_drag_timeline.html'>Drag timeline</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='03_scales'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='03_scales'>Scales</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/01_multiple_scales.html'>Multiple scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/02_month_days.html'>Month view</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/03_full_year.html'>Year scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/04_days.html'>Day hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/05_dynamic_scales.html'>Dynamic scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/06_custom_scales.html'>Custom scales</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/07_minutes_scale.html'>Minutes timeline</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/08_scale_autoconfig.html'>Auto resize scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/10_working_hours.html'>Show working hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/11_select_column.html'>Selecting columns</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/12_year_quarters.html'>Year quarters scale</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/13_zoom_to_fit.html'>Zoom To Fit</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='03_scales/14_scale_zoom_by_wheelmouse.html'>Mouse wheel zoom</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='04_customization'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='04_customization'>Customization</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/01_outer_content.html'>Define side content</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/02_custom_tree.html'>Custom tree formatting</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/03_link_styles.html'>Link styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/04_task_styles.html'>Task styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/05_tree_template.html'>Template for tree nodes</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/06_highlight_weekend.html'>Highlighting weekends</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/07_progress_text.html'>Text in the Progress bar</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/08_templates.html'>Styling task bars with events</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/09_html_content.html'>Custom html content</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/10_context_menu.html'>Simple context menu</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/11_split_task.html'>Split task</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/13_autosize_container.html'>Expand container</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/16_inline_task_colors.html'>Specify inline colors for Tasks and Links</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/18_subtasks_displaying.html'>Display subtasks when the Project is closed</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/20_message_types.html'>Gantt message types</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='04_customization/21_open_split_task.html'>Expand and collapse split tasks</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='05_lightbox'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='05_lightbox'>Lightbox</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/01_lightbox_customization.html'>Lightbox customization</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_checkbox.html'>Checkbox control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_progress_lightbox.html'>Progress lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/02_radio.html'>Radio control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/03_validation.html'>Validate lightbox values</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/04_custom_editor.html'>Custom control in the lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/05_template.html'>Template control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/06_custom_button.html'>Custom button in the lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/07_time.html'>Time control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/08_parent_selector.html'>Parent selector</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/09_years_selector_range.html'>Specify year selector range</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/10_progress_slider.html'>Slider control in lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/11_datepicker_for_lightbox.html'>Datepicker in lightbox</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/12_select.html'>Select control</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='05_lightbox/14_jquery_multiselect.html'>3rd party multiselect control</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='06_skins'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='06_skins'>Skins</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/01_default.html'>Default skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/02_default_lightbox.html'>Task edit form</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/03_skyblue.html'>'Skyblue' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/04_meadow.html'>'Meadow' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/05_broadway.html'>'Broadway' skin</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/06_dynamic_skin.html'>Change skin dynamically</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/07_high_contrast_black.html'>High contrast theme - Black</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/08_high_contrast_white.html'>High contrast theme - White</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='06_skins/09_material.html'>Material theme</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='07_grid'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='07_grid'>Grid</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/01_builtin_sorting.html'>Built-in sorting</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/02_branch_ordering.html'>Branch ordering</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/03_filtering.html'>Filtering</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/04_custom_sorting.html'>Custom sorting function</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/05_sort_api.html'>Using sorting methods</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/06_without_grid.html'>Render Gantt chart without grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/07_custom_buttons.html'>Custom Buttons in a Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/08_drag_between_levels.html'>Drag and drop rows in Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/09_wbs_column.html'>Show Task WBS Codes (Outline Numbers)</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/10_scrollable_grid.html'>Horizontal scroll inside Grid</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/11_inline_edit_basic.html'>Inline editing</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/12_inline_edit_key_nav.html'>Inline editing - keyboard navigation mode</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/13_custom_mapping.html'>Inline editing - Custom keyboard mapping</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='07_grid/14_branch_ordering_highlight.html'>Branch ordering - highlighting mode</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='08_api'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='08_api'>Api</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/01_dnd_events.html'>D'n'D Events</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/02_constraints.html'>Limit drag and drop dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/03_validation.html'>Validation</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/04_limit_project.html'>Fixed project dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/05_limit_drag_dates.html'>Denying dragging tasks out of specific dates</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/06_export.html'>Export data from Gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/07_export_styles.html'>Task styles</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/08_export_other.html'>Export data : MS Project, PrimaveraP6, Excel &amp; iCal</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/09_export_store.html'>Export data: store online</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/11_project_structure.html'>Predefined Project Structure</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/12_fit_task_text.html'>Dynamically move text content of a task</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/13_highlight_drag_position.html'>Highlight Task Position on Drag</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/18_load_from_mpp.html'>Import MS Project file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/18_load_from_primaverap6.html'>Import Primavera P6 file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/19_draggable_projects.html'>Draggable projects</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/21_load_from_excel.html'>Import Excel file</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='08_api/22_data_processor.html'>Custom data api - using local storage</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='09_worktime'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='09_worktime'>Worktime</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/01_working_hours_per_day.html'>Calculate working hours</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/02_working_days.html'>Working days as duration</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/03_exclude_holidays.html'>Exclude holidays</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/04_custom_workday_duration.html'>Custom working days and time</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/05_adjust_to_worktime.html'>Correct task position on drag</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/06_task_calendars.html'>Task level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/07_resource_calendars.html'>Resource level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/08_project_calendars.html'>Project level calendars</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/09_decimal_durations.html'>Decimal durations for tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/10_merge_calendars.html'>Merge work Calendars of different resources</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='09_worktime/11_working_hours_with_minutes.html'>Specify work time with minute precision (8:30-17:30)</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='10_layout'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='10_layout'>Layout</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/01_rightside_columns.html'>Grid columns rightside of gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/02_resource_panel.html'>Gantt chart with resource panel</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/03_scale_at_bottom.html'>Time scale at the bottom of gantt</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='10_layout/04_rtl.html'>Right to left gantt</a></li></ul>
						</details>
				</td>
			</tr>

			<tr>
				<td style=' width:30px; vertical-align:top '>
						<a href='11_resources'><div class='nav_folder_img'>&nbsp;</div></a>
				</td>
				<td style="display: inline-block; margin-top: 6px;padding-left: 2px;"> 
						<details class='list_samples' style="display: inline;">
								<summary>
										<a style='line-height: 20px;vertical-align: top;' href='11_resources'>Resources</a> 
								</summary>
								<ul style="padding-inline-start: 0px;"><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/01_assigning_resources.html'>Assigning owners to tasks</a></li><li style='list-style-type: none;'><div class='nav_page_img' style='display: inline-block; vertical-align: bottom; margin: 0 5px;'></div><a target='_blank' style='padding: 15px;' href='11_resources/06_assign_multiple_owners.html'>Assign multiple owners to a task</a></li></ul>
						</details>
				</td>
			</tr>

				</table>
			</div>
		</div>




			</div>
		</div>

		<!--Side quick links -->
		<div class="side_links">
			<a class="reference_link" href="https://docs.dhtmlx.com/gantt/api__refs__gantt.html">
				<span>API Reference</span>
			</a>
			<a class="sample_link" href="index.html">
				<span>Code Samples</span>
			</a>
			<a class="forum_link" href="https://forum.dhtmlx.com/c/gantt">
				<span>Developer Forum </span>
			</a>
		</div>
	</div>
	</div>

	<div class="footer_linea">&nbsp;</div>
	<div class="footer_lineb">
		<div class='page_inner_header'>
			<a href='https://dhtmlx.com'><div class='bottom_webix_block bottom_webix_logo' ></div></a>
			<div class='copyright bottom_webix_block'>© 2020 XB Software Ltd.<br>
			All rights reserved</div>
			<div class='bottom_webix_also'>
				<h4>Check also:</h4>
				<li><a href='https://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml' target='_blank'>DHTMLX Scheduler</a></li>
				<li><a href='https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/' target='_blank'>DHTMLX Spreadsheet</a></li>
				<li><a href='https://dhtmlx.com/docs/products/dhtmlxSuite/index.shtml' target='_blank'>Other DHTMLX components</a></li>
			</div>
		</div>
	</div>
	<script>
		var msBrowser = 
		navigator.userAgent.indexOf("MSIE ") > 0 || 
		navigator.userAgent.indexOf("Trident") > 0 || 
		navigator.userAgent.indexOf("Edge") > 0

		if (msBrowser){
			var summaryElements = document.querySelectorAll(".list_samples");
			for (var i = 0; i < summaryElements.length; i++) {
				var navItem = summaryElements[i];
				var link = navItem.querySelector("a");
				var parent = navItem.parentNode;
				parent.insertBefore(link, navItem); 
				navItem.style.display = 'none';
			}
		}
	</script>
</body>
</html>